<template>
  <view class="choose-coupon-container">
    <!-- 页面头部 -->
    <view class="header">
      <view class="header-title">优惠券</view>
    </view>
    
    <!-- 优惠券列表 -->
    <view class="coupon-list">
      <!-- 优惠券1：满减 -->
      <view v-for="item in coupons.full" :key="item.id" class="coupon-card">
        <view class="coupon-content">
          <view class="coupon-left">
            <view class="coupon-value">¥{{ item.preferentialMoney }}</view>
            <view class="coupon-condition">满{{item.triggerMoney}}元可用</view>
          </view>
          <view class="coupon-right">
            <view class="coupon-description">通用/仅限于XX加油站使用</view>
            <view class="coupon-date">{{ item.startTime }}-{{ item.endTime }}</view>
            <button class="use-btn" @click="backToPrevious(item)">立即使用</button>
          </view>
        </view>
      </view>
      
      <!-- 优惠券2：折扣 -->
      <view v-for="item in coupons.discount" :key="item.id" class="coupon-card">
        <view class="coupon-content">
          <view class="coupon-left">
            <view class="coupon-value">{{ item.discount*10 }}折</view>
            <view class="coupon-condition">无门槛使用</view>
          </view>
          <view class="coupon-right">
            <view class="coupon-description">通用/仅限于XX加油站使用</view>
            <view class="coupon-date">{{ item.startTime }}-{{ item.endTime }}</view>
            <button class="use-btn" @click="backToPrevious(item)">立即使用</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import request from '@/utils/request.js'
export default {
  components: {},
  data() {
    return {
      coupons:{
        discount:[],
        full:[]
      }
    }
  },
  computed: {},
  methods: {
    // 返回上一页
    backToPrevious(item) {
      uni.setStorageSync('coupon', item);
      uni.navigateBack();
    },
    
  },
  watch: {},

  // 页面周期函数--监听页面加载
  onLoad() {
    request({
      url: '/pyh/coupon/listByUserId',
      method: 'GET',
     }).then(res => {
      console.log(res);
      
       // 添加完整的防御性检查，确保res.data存在且是数组
       if(res && res.data && Array.isArray(res.data)){
         res.data.forEach(item => {
         if(item.type == 1){
           this.coupons.full.push(item)
         }else{
           this.coupons.discount.push(item)
         }
        })
       }

    
    })

  },
  // 页面周期函数--监听页面初次渲染完成
  onReady() {},
  // 页面周期函数--监听页面显示(not-nvue)
  onShow() {},
  // 页面周期函数--监听页面隐藏
  onHide() {},
  // 页面周期函数--监听页面卸载
  onUnload() {},
}
</script>

<style scoped>
.choose-coupon-container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 头部样式 */
.header {
  height: 100rpx;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1rpx solid #eeeeee;
  position: relative;
}

.header-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333333;
}

/* 优惠券列表样式 */
.coupon-list {
  padding: 30rpx 20rpx;
}

/* 优惠券卡片样式 */
.coupon-card {
  margin-bottom: 30rpx;
  border-radius: 16rpx;
  overflow: hidden;
  background-color: #ffffff;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.coupon-content {
  display: flex;
  position: relative;
}

/* 优惠券左侧金额区域 */
.coupon-left {
  width: 200rpx;
  background-color: #007aff;
  color: #ffffff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40rpx 0;
}

.coupon-value {
  font-size: 48rpx;
  font-weight: bold;
  margin-bottom: 10rpx;
}

.coupon-condition {
  font-size: 24rpx;
  opacity: 0.9;
}

/* 优惠券右侧信息区域 */
.coupon-right {
  flex: 1;
  padding: 30rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.coupon-description {
  font-size: 28rpx;
  color: #333333;
  margin-bottom: 10rpx;
}

.coupon-date {
  font-size: 24rpx;
  color: #ff6b6b;
  margin-bottom: 20rpx;
}

.use-btn {
  width: 160rpx;
  height: 60rpx;
  line-height: 60rpx;
  font-size: 24rpx;
  color: #ffffff;
  background-color: #007aff;
  border: none;
  border-radius: 30rpx;
  padding: 0;
  margin-top: 10rpx;
  margin-left: auto;
}

/* 模拟优惠券左侧装饰线 */
.coupon-content::before {
  content: '';
  position: absolute;
  left: 200rpx;
  top: 20rpx;
  bottom: 20rpx;
  width: 1rpx;
  background: linear-gradient(180deg, transparent 0%, #ffffff 10%, #ffffff 90%, transparent 100%);
}
</style>